<template>
  <view class="home">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input" @tap="handleSearch">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <text class="placeholder">请输入小区或商圈名称</text>
      </view>
    </view>

    <!-- 轮播广告 -->
    <swiper class="banner" circular autoplay indicator-dots>
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image :src="item.image" mode="aspectFill" @tap="handleBannerClick(item)"></image>
      </swiper-item>
    </swiper>

    <!-- 快捷导航 -->
    <view class="quick-nav">
      <view class="nav-item" v-for="(item, index) in navItems" :key="index" @tap="handleNavClick(item)">
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{item.name}}</text>
      </view>
    </view>

    <!-- 热门推荐 -->
    <view class="section">
      <view class="section-header">
        <text class="title">热门推荐</text>
        <text class="more" @tap="goToMore">查看更多</text>
      </view>
      <scroll-view scroll-x class="hot-houses">
        <view 
          class="hot-house-item" 
          v-for="house in hotHouses" 
          :key="house.id"
          @tap="goToDetail(house.id)"
        >
          <image :src="house.imageUrl" mode="aspectFill"></image>
          <view class="info">
            <text class="title">{{house.title}}</text>
            <text class="price">¥{{house.price}}/月</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view 
        v-for="(item, index) in filterItems" 
        :key="index"
        class="filter-item"
        @tap="handleFilter(index)"
      >
        <text :class="{'active': item.active}">{{item.name}}</text>
        <uni-icons :type="item.active ? 'up' : 'down'" size="12" color="#666"></uni-icons>
      </view>
    </view>

    <!-- 房源列表 -->
    <view class="house-list-container">
      <scroll-view 
        scroll-y 
        class="house-list"
        @scrolltolower="loadMore"
        :refresher-enabled="true"
        :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh"
      >
        <house-card
          v-for="house in houseList"
          :key="house.id"
          :house="house"
          @tap="goToDetail(house.id)"
        ></house-card>
        
        <uni-load-more :status="loadMoreStatus"></uni-load-more>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import HouseCard from '../../components/house-card/index.vue'

export default {
  components: {
    HouseCard
  },
  data() {
    return {
      // 轮播图数据
      banners: [
        { id: 1, image: '/static/banner/banner1.jpg', url: '' },
        { id: 2, image: '/static/banner/banner2.jpg', url: '' },
        { id: 3, image: '/static/banner/banner3.jpg', url: '' }
      ],
      // 导航项
      navItems: [
        { name: '整租', icon: '/static/images/nav/entire.png', type: 'entire' },
        { name: '合租', icon: '/static/images/nav/share.png', type: 'share' },
        { name: '我的收藏', icon: '/static/images/nav/favorite.png', type: 'favorite' },
        { name: '在线客服', icon: '/static/images/nav/service.png', type: 'service' }
      ],
      // 热门房源
      hotHouses: [],
      // 筛选条件
      filterItems: [
        { name: '区域', active: false },
        { name: '租金', active: false },
        { name: '户型', active: false },
        { name: '筛选', active: false }
      ],
      // 房源列表
      houseList: [],
      page: 1,
      loadMoreStatus: 'more',
      isRefreshing: false
    }
  },
  onLoad() {
    this.getHotHouses()
    this.getHouseList()
  },
  methods: {
    // 获取热门房源
    async getHotHouses() {
      // 模拟接口请求
      const res = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            list: Array(4).fill().map((_, index) => ({
              id: index + 1,
              title: '精装修一室一厅',
              price: '3500',
              imageUrl: '/static/house/default.jpg'
            }))
          })
        }, 500)
      })
      this.hotHouses = res.list
    },
    
    // 处理导航点击
    handleNavClick(item) {
      switch(item.type) {
        case 'entire':
          uni.navigateTo({
            url: `/src/pages/games/snake`
          })
          break
		
        case 'share':
          uni.navigateTo({
            url: `/src/pages/house/list?type=${item.type}`
          })
          break
        case 'favorite':
          uni.navigateTo({
            url: '/src/pages/user/favorite'
          })
          break
        case 'service':
          // 打开客服会话
          break
      }
    },
    
    // 处理banner点击
    handleBannerClick(banner) {
      if(banner.url) {
        uni.navigateTo({
          url: banner.url
        })
      }
    }
  }
}
</script>

<style lang="less">
@import '../../styles/uni.less';

.home {
  min-height: 100vh;
  background-color: @bg-color-grey;
}

.banner {
  height: 300rpx;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.quick-nav {
  display: flex;
  padding: @spacing-lg;
  background-color: @bg-color;
  margin-bottom: @spacing-sm;
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    image {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: @spacing-xs;
    }
    
    text {
      font-size: @font-size-sm;
      color: @text-color;
    }
  }
}

.section {
  background-color: @bg-color;
  margin-bottom: @spacing-sm;
  padding: @spacing-lg;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: @spacing-lg;
    
    .title {
      font-size: @font-size-lg;
      font-weight: bold;
      color: @text-color;
    }
    
    .more {
      font-size: @font-size-sm;
      color: @text-color-light;
    }
  }
}

.hot-houses {
  white-space: nowrap;
  
  .hot-house-item {
    display: inline-block;
    width: 300rpx;
    margin-right: @spacing-lg;
    
    image {
      width: 100%;
      height: 200rpx;
      border-radius: @border-radius-sm;
    }
    
    .info {
      padding: @spacing-sm 0;
      
      .title {
        font-size: @font-size-md;
        color: @text-color;
        display: block;
      }
      
      .price {
        font-size: @font-size-lg;
        color: @error-color;
        font-weight: bold;
      }
    }
  }
}
</style> 